﻿@page "/maps/tooltip"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
     This sample depicts the countries that were appeared in the finals of Cricket World Cup and their counts. By hovering the mouse over the shapes, county name, finalist count, and winning count will be displayed in the tooltip format.
</SampleDescription>
<ActionDescription>
   <p>In this example, to see the tooltip in action, hover the mouse over a shape or tap a shape in touch enabled devices. Tooltip is enabled in this sample using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html'>MapsLayerTooltipSettings</a></code> Also, the interactive legend has been placed at the left of the map.</p>
   <p>More information about tooltip can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/user-interactions/#tooltip'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsEvents TooltipRendering="OnTooltipRendering" />
        <MapsTitleSettings Text="Finalist in Cricket World Cup">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false" />
        <MapsLegendSettings Visible="true" Mode="LegendMode.Interactive" Position="LegendPosition.Left" Orientation="LegendArrangement.Vertical" Height="70%" Width="10" />
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' DataSource="@PerformanceReport" TValue="Country"
                        ShapePropertyPath="@ShapePropertyPath" ShapeDataPath="Name">
                <MapsLayerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${City}</b><br>Finalist: <b>${Winner}</b><br>Win: <b>${Runner}" />
                <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Winner">
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping Value="1" Color="@ShapeColorOne" />
                        <MapsShapeColorMapping Value="2" Color="@ShapeColorTwo" />
                        <MapsShapeColorMapping Value="3" Color="@ShapeColorThree" />
                        <MapsShapeColorMapping Value="7" Color="@ShapeColorFour" />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/List_of_Cricket_World_Cup_finals" target="_blank">en.wikipedia.org</a>
    </div>
</div>

@code {
    public string[] ShapePropertyPath = { "name" };
    public string[] ShapeColorOne = { "#b3daff" };
    public string[] ShapeColorTwo = { "#80c1ff" };
    public string[] ShapeColorThree = { "#1a90ff" };
    public string[] ShapeColorFour = { "#005cb3" };
    public List<Country> PerformanceReport = new List<Country> {
        new Country { Name="India", Winner="3", Runner="2", City="India" },
        new Country { Name="Dominican Rep.", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Cuba", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Jamaica", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Haiti", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Guyana", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Suriname", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Trinidad and Tobago", Winner="3", Runner="2", City="West Indies" },
        new Country { Name="Sri Lanka", Winner="3", Runner="1", City="Sri Lanka" },
        new Country { Name="United Kingdom", Winner="3", Runner="0", City="England" },
        new Country { Name="Pakistan", Winner="2", Runner="1", City="Pakistan" },
        new Country { Name="New Zealand", Winner="1", Runner="0", City="New Zealand" },
        new Country { Name="Australia", Winner="7", Runner="5", City="Australia" }
    };
    public class Country
    {
        public string Name { get; set; }
        public string Winner { get; set; }
        public string Runner { get; set; }
        public string City { get; set; }
    }
    public void OnTooltipRendering(Syncfusion.Blazor.Maps.TooltipRenderEventArgs args)
    {
        if (args.Data == null)
        {
            args.Cancel = true;
        }
    }
}